<template>
  <div class="balance-content">
    <viHeader
      :title="title"
      :radioList="radioList"
      @enlarge="enlarge"
      @changeRadio="changeRadio"
      v-if="!showHeader"
    />
    <div class="balance-main" :style="{ height: height }">
      <div class="balance-list" ref="reference"></div>
    </div>
  </div>
</template>
<script>
import viHeader from "@/components/visualization/header/index";
import echarts from "echarts";
export default {
  name: "vi-balance",
  components: {
    viHeader,
  },
  props: {
    showHeader: {
      default: false,
    },
    height: {
      default: null,
    },
    balanceList: {
      default: [],
    },
    accoutTagList: {
      default: () => [],
    },
  },
  data() {
    return {
      title: {
        name: "账户余额",
        unit: "万元",
      },
      radioList: {
        radio: "2",
        list: [],
      },
      option: {},
      series: [],
      yData: [],
      barColor: [
        //圆柱体颜色
        ["rgba(24, 144, 255, 1)", "rgba(96, 178, 255, 1)"],
        ["rgba(62, 196, 217, .7)", "rgba(101, 234, 255, .7)"],
        ["rgba(96, 216, 61, .7)", "rgba(162, 248, 137, .7)"],
        ["rgba(255, 229, 32, .7)", "rgba(255, 229, 32, .7)"],
      ],
      legend: [],
    };
  },
  mounted() {
    // this.draw();
  },
  methods: {
    draw(val) {
      this.legend = this.accoutTagList.map((item) => item.name);
      const yData = val.map((item) => {
        const data = {
          name: item.deptName,
          value: [0, 0, 0, 0],
        };
        if (item.infos && item.infos.length > 0) {
          item.infos.forEach((infoItem) => {
            this.accoutTagList.forEach((el, elIndex) => {
              if (infoItem.pName === el.name) {
                let num = 0;
                if (infoItem.amount) {
                  num = (Number(infoItem.amount) / 10000).toFixed(3) || 0;
                }
                data.value[elIndex] = Number(num);
              }
            });
          });
        }

        return data;
      });
      console.log(yData);
      this.yData = yData;
      this.drawChart();
    },
    setSeries() {
      let newseries = [];
      const yData = this.yData;
      let discColor = [
        //圆片颜色
        ["rgba(24, 144, 255, 1)", "rgba(96, 178, 255, 1)"],
        ["rgba(62, 196, 217, 1)", "rgba(101, 234, 255, 1)"],
        ["rgba(96, 216, 61, 1)", "rgba(162, 248, 137, 1)"],
        ["rgba(246, 197, 22, 1)", "rgba(255, 229, 32, 1)"],
        ["rgba(246, 197, 22, 1)", "rgba(255, 229, 32, 1)"],
      ];

      let barColor = this.barColor; //圆柱体颜色
      // if (this.legend.length > 0) {//限制最多4个
      //   if (this.legend.length < 5) {
      //     discColor.length = this.legend.length+1;
      //     barColor.length = this.legend.length;
      //   }else{
      //     discColor.length = 5;
      //     barColor.length = 4;
      //   }
      // }
      //最底下圆片设置
      newseries.push({
        name: "",
        type: "pictorialBar",
        symbolSize: [32, 16],
        symbolOffset: [0, 10],
        z: 12,
        data: (() => {
          const data = [];
          yData.forEach((item, index) => {
            data.push({
              name: item.name,
              value: `${index + 1}`,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: discColor[0][0],
                    },
                    {
                      offset: 1,
                      color: discColor[0][1],
                    },
                  ]),
                },
              },
            });
          });

          return data;
        })(),
      });
      //剩余4个圆片设置
      discColor
        .filter((el, i) => i > 0)
        .forEach((el, i) => {
          console.log(yData);
          console.log(yData[i + 1]);
          newseries.push({
            name: "",
            type: "pictorialBar",
            symbolSize: [32, 20],
            symbolOffset: [0, -12],
            z: 12,
            data: (() => {
              let data = [];
              yData.forEach((item, index) => {
                data.push({
                  name: item.name,
                  value: (() => {
                    let valueTotal = 0;
                    for (let valueI = 0; valueI < i + 1; valueI++) {
                      valueTotal += item.value[valueI];
                    }
                    return valueTotal;
                  })(),
                  symbolPosition: "end",
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: el[0],
                          },
                          {
                            offset: 1,
                            color: el[1],
                          },
                        ],
                        false
                      ),
                    },
                  },
                });
              });
              return data;
            })(),
          });
        });

      //圆柱体设置

      barColor.forEach((el, i) => {
        newseries.push({
          name: this.legend[i],
          type: "bar",
          barWidth: 32,
          z: 4 - i,
          barGap: "-100%",
          label: (() => {
            if (i < 3) {
              return null;
            } else {
              return {
                show: true,
                position: "top",
                distance: 12,
                color: "#000",
                fontSize: 14,
                fontFamily: "Calibri",
                fontWeight: 400,
                formatter: (() => {
                  //柱形图上方文字
                  return this.yData.reduce((total, item) => {
                    const itemTotal = item.value.reduce(
                      (ito, el) => (ito += Number(el) || 0),
                      0
                    );
                    total += itemTotal;
                    return total;
                  }, 0);
                })(),
              };
            }
          })(),
          itemStyle: {
            //lenged文本
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: el[0],
              },
              {
                offset: 1,
                color: el[1],
              },
            ]),
          },

          data: (() => {
            let data = [];
            yData.forEach((item, index) => {
              data.push({
                name: item.name,
                value: (() => {
                  let valueTotal = 0;
                  for (let valueI = 0; valueI < i + 1; valueI++) {
                    valueTotal += item.value[valueI];
                  }
                  return valueTotal.toFixed(2);
                })(),
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          //第一节下面
                          offset: 0,
                          color: el[0],
                        },
                        {
                          offset: 1,
                          color: el[1],
                        },
                      ],
                    },
                  },
                },
              });
            });
            return data;
          })(),
        });
      });
      return newseries;
    },
    drawChart() {
      const dom = echarts.init(this.$refs.reference);
      const name = this.yData.map((item) => item.name);
      const series = this.setSeries();
      const option = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "axis",
          confine: true,
          backgroundColor: "rgba(33, 40, 46, 1)",
          formatter: (params) => {
            let tootip = "";
            const titleClass = `width:100%;text-align:left;font-size: 14px;font-family: Microsoft YaHei UI;font-weight: bold;color: #FFFFFF;`;
            const title = `<div style="${titleClass}">${params[0].name}：${
              params[params.length - 1].value
            }万元</div>`;

            let content = "";
            const contentClass = `
                          font-size: 12px;
                          font-family: Microsoft YaHei UI;
                          font-weight: 400;
                          line-height: 15px;
                          color: rgba(255, 255, 255, .64);
                          margin:4px 0;
                          `;
            params
              .filter((item, i) => i > 4)
              .forEach((item, i) => {
                const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${this.barColor[i][0]};"></span>`;

                if (this.legend.length > i) {
                  content += `<div style="${contentClass}">${marker}${
                    item.seriesName
                  }：${this.yData[params[0].dataIndex].value[i]}万元</div>`;
                }
              });

            tootip = tootip + title + content;
            return tootip;
          },
        },
        legend: {
          data: this.legend,
          x: "center",
          y: "left",
          selectedMode: false,
          //取消图例上的点击事件
          padding: [0, 0, 0, 0],
          textStyle: {
            fontSize: 14,
            color: "rgba(0,0,0,.48)",
          },
          icon: "circle",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 12,
        },
        grid: {
          top: "60",
          left: "-30",
          right: "0",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          data: name,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#000",
              fontSize: 14,
              fontWeight: "bold",
            },
            margin: 14, //刻度标签与轴线之间的距离。
          },
        },
        yAxis: {
          show: false,
          splitLine: {
            show: false,
            lineStyle: {
              color: "#eee",
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#888",
            },
          },
        },
        series,
        // series: [
        //   {
        //     type: "bar"
        //   },
        //   ...this.setSeries()
        // ]
      };
      dom.setOption(option);
      window.addEventListener("resize", () => {
        dom.resize();
      });
    },
    enlarge() {
      this.$emit("enlarge");
    },
    changeRadio(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped lang="scss">
// @import "../styles/balance.scss";
@import "@/components/visualization/styles/function.scss";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.balance-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .balance-main {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    padding: vw(0) vw(12) vw(16) vw(12);

    .balance-list {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
